<template>
	<view>
		<view class="" style="padding-bottom: 160rpx;">
			<view class="mainpadding dingbu">
				<view class="flexbetween ssbox1" style="box-sizing: border-box;">
					<view class="flexleft">
						<u-icon name="search" color="#999999" size="20"></u-icon>
						<input type="text" placeholder="请输入搜索内容" v-model="keywords" @confirm="init()" confirm-type="search" class="hei_text main_size bold">
					</view>
					<view class="rightss" @click="init()">搜索</view>
				</view>
				<u-tabs :list="list1" :current="current" lineColor="#C01933" :scrollable="false" @click="changetab" :activeStyle="{
					    color: '#C01933',
					    fontWeight: 'bold',
					    transform: 'scale(1.05)'
					}" :inactiveStyle="{
					            color: '#999999',
								fontWeight: '500',
					            transform: 'scale(1)'
					        }" itemStyle="padding-left: 28px; padding-right: 28px; height: 44px;"></u-tabs>
			</view>
			<view class="mainpadding2">
				<!--  -->
				<view class="flexcenter" v-if="!list.data.length">
					<view class="placeholderimage" style="margin-top: 300rpx;"></view>
				</view>
				<view class="mainpadding ffffff radius margin_top" v-for="item in list.data" :key="item.BillID" @click="tzckxq(item)">
					<view class="flexbetween">
						<view class="ershiba xiaohei nofonweight">{{item.BillCode}}
							<text class="xiaohong ershiba" v-if="istui(item.BillCode)">（已退）</text>
						</view>
						<view class="xiaolv ershiba fonweight" v-if="item.Comment==1">已完成</view>
						<view class="xiaohong ershiba fonweight" v-if="item.Comment != 1">待评价</view>
					</view>
					<view class="xiahuaxian margin_top " v-for="ite in item.goodslist" :key="ite.PRec">					
						<view class="flexbetween">
							<view class="shili margin_right2">
								<image :src="ite.goodsinfo.image_text" mode=""></image>
							</view>
							<view class="" style="width: 66%;">
								<view class="titletext fonweight yhxk">{{ite.goodsinfo.FullName}}</view>
								<!-- <view class="strongtext nofonweight xiankuan margin_top1">这是商品规格介绍.</view> -->
								<view class="flexbetween margin_top5">
									<view class=" strongtext xiaohei">数量
										<text class="strongtext xiaohei fonweight">*{{Number(ite.Qty)}}</text>
									</view>
									<view class="strongtext xiaohong">成本补贴价
										<text class="sanshier xiaohong fonweight">￥{{Number(ite.total)}}</text>
									</view>
									<!-- <view class="lanbox">库存 32</view> -->
								</view>
								
							</view>
						</view>
					</view>
					<view class="flexright margin_top">
						<view class="ddxqbtn flexcenter">查看订单详情</view>
						<view class="ddxqbtn2 flexcenter margin_left" v-if="item.Comment != 1" @click.stop="tzljpj(item)">立即评价</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				current: 0,
				list1: [{
						name: '全部',
						value: 0,
					},
					// {
					// 	name: '待付款',
					// 	value: 1,
					// },
					// {
					// 	name: '待收货',
					// 	value: 2,
					// },
					{
						name: '待评价',
						value: 1,
					}
				],
				keywords:"",
				page:1,
				list:{
					data:[]
				},
				pagedown:true,
			}
		},
		onLoad(option) {
			let _this = this
			this.current = option.i
			
		},
		onShow() {
			this.init()
		},
		methods: {
			init(isPage, page) {
				let _this = this;
				let url = '/api/goodscl/myOrderIndex'
				uni.showLoading({
					title:"请稍后",
					mask:true,
				})
				let data = {
					page: page || 1,
					limit:12,
					keywords:this.keywords,
					status:this.current
				}
				httpRequest.request(url, 'GET',data, false, false, true).then(res => {
					if (res.code == 1) {
						if(res.data.length==0){
							this.pagedown = false
						}
						if (isPage == true) {
							_this.list.data = _this.list.data.concat(res.data);
						} else {
							_this.list.data = res.data;
							this.pagedown = true
							this.page = 1
						}
					}
					uni.hideLoading()
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (!this.pagedown) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 跳转 查看详情
			tzckxq(item) {
				uni.navigateTo({
					url: '/pages_mine/dingdanxq?id='+item.BillID+"&datatype="+item.datatype
				})
			},
			tzljpj(item) {
				uni.navigateTo({
					url: '/pages_mine/pingjiasd?id='+item.BillID+"&datatype="+item.datatype
				})
			},
			changetab(e) {
				this.current = e.value
				this.list.data = []
				this.init()
				// console.log(e, 999)
			},
			istui(val){
				if(val[1]=="T"){
					return true
				}else{
					return false
					
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.qpjbtn {
		width: 180rpx;
		height: 58rpx;
		background: linear-gradient(90deg, #F7913D 0%, #EC682B 100%);
		border-radius: 33rpx 33rpx 33rpx 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.ddxqbtn {
		padding: 10rpx 20rpx;
		border-radius: 33rpx 33rpx 33rpx 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		border: 1rpx solid #D7D7D7;
	}
	.ddxqbtn2 {
		padding: 10rpx 20rpx;
		border-radius: 33rpx 33rpx 33rpx 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #EC682B;
		border: 1rpx solid #EC682B;
	}

	.xiaobrn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 282rpx;
		height: 64rpx;
		background: #F17832;
		border-radius: 39rpx 39rpx 39rpx 39rpx;
	}

	.dingdtu {
		width: 169rpx;
		height: 169rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		image {
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			width: 100%;
			height: 100%;
		}
	}

	.weixz {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #999999;
		border-radius: 50%;
	}

	.jianth {
		width: 28rpx;
		height: 38rpx;
		position: absolute;
		right: 142rpx;
		bottom: 86rpx;
		background-size: 100% 100%;
		background-image: url('../static/image/system/jiant.png');
	}

	.input {
		width: 50rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 6rpx 10rpx;
		background: #F2F2F2;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.lanbox {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		color: #4B88B4;
		width: 115rpx;
		height: 41rpx;
		background: #E1F3FF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #7FBDE3;
	}

	.fenbox {
		width: 153rpx;
		height: 41rpx;
		background: #FFEFF2;
		font-size: 24rpx;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #C01933;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid rgba(192, 25, 51, 1);
	}

	.shili {
		width: 189rpx;
		height: 199rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}

	.ssbox1 {
		position: relative;
		padding: 5rpx 5rpx 5rpx 10rpx;
		border-radius: 50rpx;
		background-color: #F2F2F2;

		.rightss {
			width: 130rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #C01933;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.dingbu {
		background: linear-gradient(179deg, #FED6D0 0%, #FFE8E6 100%);
	}
</style>